<template>
    <div class="container">
    <div class="header">
        <h2 class="title">中药饮片追溯系统</h2>
        <img class="logo" src="@/assets/images/logo-mini.png"/>
    </div>


<!--   F0 infos start   -->
    <div v-if="switchs.floor0">
        <div class="sub-title">中药饮片信息</div>
        <div class="content">
            <div class="item" v-if="firstFloor.name">
                <span class="label">【<span class="label-text">品名</span>】</span>
                <span class="value">{{firstFloor.name}}</span>
            </div>
            <div class="item" v-if="firstFloor.specification">
                <span class="label">【<span class="label-text">规格</span>】</span>
                <span class="value">{{firstFloor.specification}}</span>
            </div>
            <div class="item" v-if="firstFloor.origin">
                <span class="label">【<span class="label-text">产地</span>】</span>
                <span class="value">{{firstFloor.origin}}</span>
            </div>
            <div class="item" v-if="firstFloor.weight">
                <span class="label">【<span class="label-text">装量</span>】</span>
                <span class="value">{{firstFloor.weight}}</span>
            </div>
<!--            <div class="item">-->
<!--                <span class="label">【<span class="label-text">功能与主治</span>】</span>-->
<!--                <span class="value">{{firstFloor.functionAttending}}</span>-->
<!--            </div>-->
<!--            <div class="item">-->
<!--                <span class="label">【<span class="label-text">用法与用量</span>】</span>-->
<!--                <span class="value">{{firstFloor.usageDosage}}</span>-->
<!--            </div>-->
            <div class="item" v-if="firstFloor.storeUp">
                <span class="label">【<span class="label-text">贮藏</span>】</span>
                <span class="value">{{firstFloor.storeUp}}</span>
            </div>
            <div class="item" v-if="firstFloor.productionBatchNumber">
                <span class="label">【<span class="label-text">生产批号</span>】</span>
                <span class="value">{{firstFloor.productionBatchNumber}}</span>
            </div>
            <div class="item" v-if="firstFloor.productionDate">
                <span class="label">【<span class="label-text">生产日期</span>】</span>
                <span class="value">{{firstFloor.productionDate}}</span>
            </div>
            <div class="item" v-if="firstFloor.expirationDate">
                <span class="label">【<span class="label-text">保质期至</span>】</span>
                <span class="value">{{getExpirationDateTime}}</span>
            </div>
            <div class="item" v-if="firstFloor.standard">
                <span class="label">【<span class="label-text">执行标准</span>】</span>
                <span class="value">{{firstFloor.standard}}</span>
            </div>
            <div class="item" v-if="firstFloor.permitNumber">
                <span class="label">【<span class="label-text">药品生产许可证号</span>】</span>
                <span class="value">{{firstFloor.permitNumber}}</span>
            </div>
            <div class="item" v-if="firstFloor.manufacturer">
                <span class="label">【<span class="label-text">生产企业</span>】</span>
                <span class="value">{{firstFloor.manufacturer}}</span>
            </div>
            <div class="item" v-if="firstFloor.companyAddress">
                <span class="label">【<span class="label-text">生产地址</span>】</span>
                <span class="value">{{firstFloor.companyAddress}}</span>
            </div>
        </div>
    </div>
<!--   F0 infos end   -->



<!--   F1 infos start   -->
    <div v-if="switchs.floor1">
        <div class="sub-title">药材信息</div>
        <div class="content-2">
            <div class="item" v-if="secondFloor.baseName">
                <span class="label">【<span class="label-text">基原名称</span>】</span>
                <span class="value">{{secondFloor.baseName}}</span>
            </div>
            <div class="item" v-if="secondFloor.latinName">
                <span class="label">【<span class="label-text">拉丁文名</span>】</span>
                <span class="value">{{secondFloor.latinName}}</span>
            </div>
            <div class="item" v-if="secondFloor.batchNumber">
                <span class="label">【<span class="label-text">批号</span>】</span>
                <span class="value">{{secondFloor.batchNumber}}</span>
            </div>
<!--            <div class="item">-->
<!--                <span class="label">【<span class="label-text">种苗来源</span>】</span>-->
<!--                <span class="value">{{secondFloor.sproutSource}}</span>-->
<!--            </div>-->
<!--            <div class="item">-->
<!--                <span class="label">【<span class="label-text">等级</span>】</span>-->
<!--                <span class="value">{{secondFloor.grade}}</span>-->
<!--            </div>-->
            <div class="item" v-if="secondFloor.plantTime">
                <span class="label">【<span class="label-text">种植时间</span>】</span>
                <span class="value">{{secondFloor.plantTime}}</span>
            </div>
<!--            <div class="item">-->
<!--                <span class="label">【<span class="label-text">种植方式</span>】</span>-->
<!--                <span class="value">{{secondFloor.plantWay}}</span>-->
<!--            </div>-->
<!--            <div class="item">-->
<!--                <span class="label">【<span class="label-text">生长年限</span>】</span>-->
<!--                <span class="value">{{secondFloor.growAgeLimit}}</span>-->
<!--            </div>-->
            <div class="item" v-if="secondFloor.storageConditions">
                <span class="label">【<span class="label-text">仓储条件</span>】</span>
                <span class="value">{{secondFloor.storageConditions}}</span>
            </div>
            <div class="item" v-if="secondFloor.plantAgeLimit">
                <span class="label">【<span class="label-text">生长周期</span>】</span>
                <span class="value">{{secondFloor.plantAgeLimit}}年</span>
            </div>
                <h3 class="mini-title" v-if="secondFloor.baseLocation" style="text-align: center">基地信息</h3>
            <div class="item" v-if="secondFloor.baseLocation">
                <span class="label">【<span class="label-text">基地位置</span>】</span>
                <span class="value">{{secondFloor.baseLocation}}</span>
            </div>
            <div class="item" v-if="secondFloor.baseAltitude">
                <span class="label">【<span class="label-text">海拔(m)</span>】</span>
                <span class="value">{{secondFloor.baseAltitude}}</span>
            </div>
            <div class="item" v-if="secondFloor.landform">
                <span class="label">【<span class="label-text">地貌</span>】</span>
                <span class="value">{{secondFloor.landform}}</span>
            </div>
            <div class="item" v-if="secondFloor.averageLapseRate">
                <span class="label">【<span class="label-text">平均气温</span>】</span>
                <span class="value">{{secondFloor.averageLapseRate}}</span>
            </div>
            <div class="item" v-if="secondFloor.recoveryTime">
                <span class="label">【<span class="label-text">采收月份</span>】</span>
                <span class="value">{{secondFloor.recoveryTime}}</span>
            </div>
            <div class="item" v-if="secondFloor.coordinateJSON">
                <span class="label">【<span class="label-text">位置分布</span>】</span>
                <gisMap style="border: 2px solid #67AFFA" :path="secondFloor.coordinateJSON"></gisMap>
            </div>
            <h3 class="mini-title" v-if="secondFloor.whetherNeedNursery" style="text-align: center">种源信息</h3>
            <div class="item" v-if="secondFloor.whetherNeedNursery">
                <span class="label">【<span class="label-text">是否需要单独育苗</span>】</span>
                <span class="value">{{secondFloor.whetherNeedNursery}}</span>
            </div>
            <div class="item" v-if="secondFloor.growMonth">
                <span class="label">【<span class="label-text">栽种月份</span>】</span>
                <span class="value">{{secondFloor.growMonth}}</span>
            </div>
            <div class="item" v-if="secondFloor.breedWay">
                <span class="label">【<span class="label-text">繁殖方式</span>】</span>
                <span class="value">{{secondFloor.breedWay}}</span>
            </div>
            <h3 class="mini-title" v-if="secondFloor.taskList" style="text-align: center">农事记录</h3>
            <div v-for="(item,i) in secondFloor.taskList" :key="i">
                <div class="item" >
                    <span class="label">【<span class="label-text">操作名称</span>】</span>
                    <span class="value">{{item.task}}</span>
                </div>
                <div class="item">
                    <span class="label">【<span class="label-text">操作图片</span>】</span>
                    <img v-if="item.picture" class="poster" :src="item.picture"/>
                </div>
            </div>
            <h3 class="mini-title" v-if="secondFloor.recoveryTime" style="text-align: center">采收及初加工</h3>
            <div class="item" v-if="secondFloor.recoveryTime">
                <span class="label">【<span class="label-text">采收时间</span>】</span>
                <span class="value">{{secondFloor.recoveryTime}}</span>
            </div>
            <div class="item" v-if="secondFloor.recoveryMethod">
                <span class="label">【<span class="label-text">采收方法</span>】</span>
                <span class="value">{{secondFloor.recoveryMethod}}</span>
            </div>
            <div class="item" v-if="secondFloor.processFlow">
                <span class="label">【<span class="label-text">初加工方法</span>】</span>
                <span class="value">{{secondFloor.processFlow}}</span>
            </div>
            <div class="item" v-if="secondFloor.inDetailProcessFlow">
                <span class="label">【<span class="label-text">详细流程</span>】</span>
                <span class="value">{{secondFloor.inDetailProcessFlow}}</span>
            </div>
            <h4 v-else>暂无药材信息</h4>
            <div class="item" v-if="secondFloor.plantPicture">
                <h3 class="mini-title" style="text-align: center">种植</h3>
                <img class="poster" :src="secondFloor.plantPicture || 'https://www.chinahomes.cn/static/images/nopic.png'"/>
            </div>
            <div class="item" v-if="secondFloor.recoveryPicture">
                <h3 class="mini-title" style="text-align: center">采收及加工</h3>
                <img class="poster" :src="secondFloor.recoveryPicture || 'https://www.chinahomes.cn/static/images/nopic.png'"/>
            </div>
<!--            <div class="item">-->
<!--                <h3 class="mini-title" style="text-align: center">加工</h3>-->
<!--                <img class="poster" :src="secondFloor.processPicture"/>-->
<!--            </div>-->
        </div>
    </div>
<!--   F1 infos end   -->

<!--   F2 infos start   -->
    <div v-if="switchs.floor2">
        <div class="sub-title">饮片生产流程</div>
        <div class="process-line">
            <div class="line-item" v-for="(item,index) in process" :key="index">
                <div class="item">
                    <span v-if="index%2==0" style="left: 32%;bottom: 50px">{{index+1}}.{{item.processName}}</span>
                    <img :src="index === process.length-1 ? require('@/assets/images/arrow.png'):require('@/assets/images/line.png')"/>
                    <span v-if="index%2==1" style="right: 32%;bottom: 50px">{{index+1}}.{{item.processName}}</span>
                </div>
            </div>
        </div>
    </div>
<!--   F2 infos end   -->

<!--   F3 infos start   -->
    <div v-if="switchs.floor3">
        <div class="sub-title">检测信息</div>
        <div>
<!--            <div class="border-box">-->
<!--                <div class="box-title">中药材检测</div>-->
<!--                <div class="box-content">-->
<!--                    <img :src="fourthFloor[0].picture"/>-->
<!--                    <div class="content">-->
<!--                        <div class="item">-->
<!--                            <span class="label">【<span class="label-text" style="width: 65px">检测结果</span>】</span>-->
<!--                            <span class="value">{{fourthFloor[0].testResult}}</span>-->
<!--                        </div>-->
<!--                        <div class="item">-->
<!--                            <span class="label">【<span class="label-text" style="width: 65px">检测标准</span>】</span>-->
<!--                            <span class="value">{{fourthFloor[0].standard}}</span>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
        <template v-if="fourthFloor?.detectionVos?.length">
            <div class="border-box" v-for="(item,i) in fourthFloor.detectionVos" :key="i">
                <div class="box-title">{{item.type == 'RC' ? '入场检测':item.type}}</div>
                <div class="box-content">
                    <div class="content">
                        <div class="item">
                            <span class="label">【<span class="label-text" style="width: 65px">批号</span>】</span>
                            <span class="value">{{ item.testArticleBatch }}</span>
                        </div>
                        <div class="item">
                            <span class="label">【<span class="label-text" style="width: 65px">检测结果</span>】</span>
                            <span class="value">{{ item.detectionResult == 2 ? '不合格':'合格' }}</span>
                        </div>
                        <div class="item">
                            <span class="label">【<span class="label-text" style="width: 65px">报告日期</span>】</span>
                            <span class="value">{{item.reportTime}}</span>
                        </div>
                        <div class="item">
                            <span class="label">【<span class="label-text" style="width: 65px">检测标准</span>】</span>
                            <span class="value">{{item.executeStandard}}</span>
                        </div>
                    </div>
                </div>
                <div class="flag">
                    <el-image style="width: 100%;height: 300px;background-color: rgba(96,96,96,0.3)" fit="contain" :src="item.detectionReport" :preview-src-list="[item.detectionReport]"></el-image>
                </div>
            </div>
        </template>
            <div class="content" v-else>
                <div class="item">
                    <span class="label">【<span class="label-text">品名</span>】</span>
                    <span class="value">{{firstFloor.name}}</span>
                </div>
                <div class="item">
                    <span class="label">【<span class="label-text">批号</span>】</span>
                    <span class="value">{{firstFloor.batchNumber}}</span>
                </div>
                <div class="item">
                    <span class="label">【<span class="label-text">生产日期</span>】</span>
                    <span class="value">{{firstFloor.productionDate}}</span>
                </div>
                <h4>本品由*四川新绿色药业科技发展有限公司检验*检验结论符合规定</h4>
            </div>
        </div>
    </div>
<!--   F3 infos ned   -->

<!--   F4 infos start   -->
    <div v-if="switchs.floor4">
            <div class="sub-title">销售追溯</div>
            <div>
                <div class="sale-box" v-if="fourthFloor.sells.length">
                    <div v-for="item in fourthFloor.sells" :key="item.id" class="sale-item">
                        <div class="title">
                            <span>●</span>
                            销售去向：{{item.clientName}}
                        </div>
                        <div class="content">
                            <span>销售重量：{{item.sellSum}}kg</span>
                            <span>销售时间：{{item.sellTime}}</span>
                        </div>
                    </div>
                </div>
                <div class="sale-box" v-else>
                    <div class="sale-item">
                        <div class="title">
                            <span>●</span>
                            销售去向：暂无销售信息
                        </div>
                    </div>
                </div>
            </div>
        </div>
<!--   F4 infos ned   -->

<!--   F5 infos start   -->
    <div v-if="switchs.floor5">
        <div class="sub-title">企业介绍</div>
<!--        <img class="company-img" :src="fourthFloor.companyLogo"/>-->
        <div class="company-content">
        <span class="company-text" v-html="fourthFloor.companyIntroduce">
            {{fourthFloor.companyIntroduce}}
        </span>
        </div>
    </div>
<!--   F5 infos end   -->

<!--    menu start    -->
<div class="icons">
    <div v-for="(item,index) in icons" :key="index" class="icon" @click="switchModule(index)">
        <img :src="item.img">
        <span class="text">{{item.text}}</span>
    </div>
</div>
<!--    menu end    -->
    </div>
</template>

<script>
import gisMap from '@/components/map.vue'
import handleRequest from "@/utils/handleRequest";
import {getInfo} from "@/api/apis";
export default {
    name: 'Home',
    components:{
        gisMap
    },
    data() {
        return {
            path:[
                [30.67477,104.001413],
                [30.674327,104.113165],
                [30.626331,104.012743],
                [30.710345,104.066644],
            ],
            icons:[
                {
                    img:require('../assets/images/icon-0.png'),
                    text:'产品信息'
                },
                {
                    img:require('../assets/images/icon-1.png'),
                    text:'药材信息'
                },
                {
                    img:require('../assets/images/icon-2.png'),
                    text:'加工信息'
                },
                {
                    img:require('../assets/images/icon-3.png'),
                    text:'检测信息'
                },
                {
                    img:require('../assets/images/icon-5.png'),
                    text:'销售追溯'
                },
                {
                    img:require('../assets/images/icon-4.png'),
                    text:'企业介绍'
                },
            ],
            process:[
                {
                    processName:'净制',
                },
                {
                    processName: '洗润'
                },
                {
                    processName:'切制',
                },
                {
                    processName:'干燥',
                },
                {
                    processName:'包装',
                },
            ],
            firstFloor:{},
            secondFloor:{},
            fourthFloor:[],
            switchs:{
                floor0:true,
                floor1:false,
                floor2:false,
                floor3:false,
                floor4:false,
                floor5:false,

            },
            detectionType:''
        }
    },
    mounted() {
        this.getInfo(this.$route.query.id,this.$route.type)
    },
    computed:{
        getExpirationDateTime() {
            if (!this.firstFloor.productionDate) return "";
            const productionTime = this.firstFloor.productionDate;
            let productionArr = [];
            if (productionTime.indexOf("/") >= 0) {
                productionArr = productionTime.split("/");
            } else if (productionTime.indexOf("-") >= 0) {
                productionArr = productionTime.split("-");
            }else{
                productionArr = productionTime.split(".");
            }
            console.log(productionArr)
            const month = Number(this.firstFloor.expirationDate);
            console.log("month",month)
            const addYear = Math.floor(month / 12);
            let originMonth = Number(productionArr[1])
            console.log(originMonth)
            let leftMonth = month % 12;
            console.log(leftMonth,'@@@')
            let addMonth = month % 12 === 0 ? originMonth : originMonth+leftMonth;
            console.log(addMonth)

            let saveYearTo = Number(productionArr[0]) + addYear
            console.log("保质期至：",`${saveYearTo}.${addMonth}`)
            if(addMonth >12){
                saveYearTo = saveYearTo+1
                addMonth = addMonth % 12
            }
            addMonth = addMonth < 10 ? (addMonth == 1 ? addMonth:`0${addMonth-1}`):addMonth-1
            let saveMonthTo = addMonth
            let saveDateTo = saveMonthTo === 1 ? saveYearTo-1+'.12':`${saveYearTo}.${saveMonthTo}`
            return saveDateTo;
        }
    },
    methods:{
        switchModule(index){
            switch (index) {
                case 0:
                    this.switchs.floor0 = true
                    this.switchs.floor1 = false
                    this.switchs.floor2 = false
                    this.switchs.floor3 = false
                    this.switchs.floor4 = false
                    this.switchs.floor5 = false
                    break;
                case 1:
                    this.switchs.floor0 = false
                    this.switchs.floor1 = true
                    this.switchs.floor2 = false
                    this.switchs.floor3 = false
                    this.switchs.floor4 = false
                    this.switchs.floor5 = false
                    break;
                case 2:
                    this.switchs.floor0 = false
                    this.switchs.floor1 = false
                    this.switchs.floor2 = true
                    this.switchs.floor3 = false
                    this.switchs.floor4 = false
                    this.switchs.floor5 = false
                    break;
                case 3:
                    this.switchs.floor0 = false
                    this.switchs.floor1 = false
                    this.switchs.floor2 = false
                    this.switchs.floor3 = true
                    this.switchs.floor4 = false
                    this.switchs.floor5 = false
                    break;
                case 4:
                    if(!this.fourthFloor?.sells?.length){
                        //弹出提示
                        window.alert("暂无销售追溯信息")
                    }else{
                        this.switchs.floor0 = false
                        this.switchs.floor1 = false
                        this.switchs.floor2 = false
                        this.switchs.floor3 = false
                        this.switchs.floor4 = true
                        this.switchs.floor5 = false
                    }
                    break;
                case 5:
                    this.switchs.floor0 = false
                    this.switchs.floor1 = false
                    this.switchs.floor2 = false
                    this.switchs.floor3 = false
                    this.switchs.floor4 = false
                    this.switchs.floor5 = true
                    break;
            }
        },
        async getInfo(id,type){
            let params = {
                id:id,
                type:type
            }
            let data = handleRequest(await getInfo(params))
            // console.log(data)
            //将日期-格式成.
            data.productionDate = data.productionDate.replace(/-/g,".")
            this.firstFloor = data
            this.secondFloor = data
            if(this.secondFloor.coordinateJSON){
                this.secondFloor.coordinateJSON = this.secondFloor.coordinateJSON.map(item=>{
                    return [item.lat,item.lng]
                })
            }
            //TODO 直接写死 因为他们他妈的根本不会添加数据，但是又要展示在追溯页上
            // this.process = data.productionFlow
            this.fourthFloor = data
        }
    },
}
</script>
<style lang="less" scoped>
@import "../assets/css/common.less";
.sale-box{
    padding: 23px;
    .sale-item{
        margin-bottom: 20px;
        .title{
            color: white;
            padding: 5px;
            text-align:left;
            background-color: #67AFFA;
            border-radius: 4px;
        }
        .content{
            display: flex;
            justify-content: space-around;
            padding: 5px;
            font-size: 14px;
        }
    }
}
.sub-title{
    font-size: 1.3rem;
    width: 50%;
    margin: 0 auto;
    color: #606060;
}
.mini-title{
    font-weight: bold;
    font-size: 18px;
    color: #007AFF;
    line-height: 18px;
    text-shadow: 0px 2px 1px rgba(0,0,0,0.16);
    text-align: left;
    font-style: normal;
    margin: 10px 0;
}
.poster{
    width: 100%;
    height: 300px;
    object-fit: cover;
    border: 2px solid #007AFF;
}

.flag{
    position: relative;
    .count{
        position: absolute;
        text-align: center;
        z-index: 10;
        color: #ffffff;
        padding:3px 10px;
        border-radius: 15px;
        background-color: rgba(23, 22, 22, 0.5);
        right: 10px;
        top: 5px;
    }
}
</style>
